<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="top-view flex row">
			<view :class="[ tabType==1 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(1)">
				<text :class="[ tabType==1 ? 'top-item-title-active':'top-item-title']">可使用</text>
				<view :class="[ tabType==1 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==2 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(2)">
				<text :class="[ tabType==2 ? 'top-item-title-active':'top-item-title']">已失效</text>
				<view :class="[ tabType==2 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
		</view>
		<mescroll-uni class="mescroll-uni-view" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :down="downOption" :up="upOption" top="200rpx">
			<view v-for="(item,index) in dataList" :key="index"
				:class="[item.status == 1 || item.status == 2 || item.status == 3 ? 'item-view':'item-view-notime', 'flex']">
				<view class="item-top-view flex row aCenter">
					<text class="item-top-view-title flex-1">券号：{{item.code}}</text>
					<view v-if="tabType == 1 && (item.status == 1)" class="item-top-btn flex center"
						@click="scan(item)">立即使用</view>
				</view>
				<view class="flex-1 flex row aCenter ppds">
					<view v-if="item.status == 1 || item.status == 2 || item.status == 3"
						class="item-round flex center">存酒券</view>
					<view v-if="item.status == 4" class="item-round-notime flex center">存酒券</view>
					<view class="line-center"></view>
					<view class="flex">
						<text
							:class="[item.status == 4 ? 'item-time-notime':'item-time']">存酒时间：{{item.createtime}}</text>
						<text :class="[item.status == 4 ? 'item-time-notime':'item-time']">过期时间：{{item.time}}</text>
					</view>
				</view>
				<view class="btm-vi flex row aCenter">
					<image src="../../static/rtt.png" mode="widthFix" class="tjj_yi" v-if="item.poiu==0" @click="diano(1,index)"></image>
					<image src="../../static/shang.png" mode="widthFix" class="tjj_yi" v-if="item.poiu==1" @click="diano(2,index)"></image>
				</view>
				<view class="btm-view flex row aCenter" v-if="item.poiu==1">
					<text>详情：{{item.content}}</text>
				</view>
				<!-- 1=可使用,2=取酒中,3=已使用,4=已过期 -->
				<image v-if="(tabType == 2 && (item.status == 2 || item.status == 3))" class="yishiyong-icon"
					src="../../static/yishiyong.png"></image>
				<image v-if="(tabType == 2 && (item.status == 4))" class="yiguoqi-icon" src="../../static/yiguoqi.png">
				</image>
			</view>
		</mescroll-uni>
		<uni-popup ref="popup" type="center">
			<view class="flex center">
				<view class="pop-con-view flex">
					<view class="title-view flex row center">
						<text class="pcon-title">确认取酒</text>
					</view>
					<view class="pcon-view flex row aCenter">
						<text class="pcon-title">券号：</text>
						<text class="pcon-hintd">{{wineItem.code}}</text>
					</view>
					<view class="pcon-viewps flex row aCenter">
						<text class="pcon-title">详情：</text>
						<view class="pcon-hintss">{{wineItem.content}}</view>
					</view>
				</view>

				<view class="btn-view flex row center">
					<view class="btn-cancel" @click.stop="cancel">取消</view>
					<view class="btn-submit" @click.stop="submit">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import wxUtil from '../../xlblib/wechat/wx-util.js';
	import XUtil from '../../common/xlb-util.js';

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				poiu: 0,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {}, // 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				}, // 上拉加载的配置(可选, 绝大部分情况无需配置)
				// 列表数据
				dataList: [],

				tabType: 1, // 1= 可使用  2=不可使用
				table_number: '',
				// showNow: false, //取酒弹窗
				wineItem: {},
				userAgent: 'wechat', //wechat alipay web
			}
		},
		onLoad() {
			//初始化微信
			wxUtil.use().then(() => {});
			if (XUtil.getUserAgent()) {
				//获取当前端口是什么
				this.userAgent = XUtil.getUserAgent();
			}
		},
		methods: {
			diano(e,i){
				if(e==1){
					console.log(i)
					this.dataList[i].poiu=1
					console.log(this.dataList)
					this.$forceUpdate()
				}else{
					console.log(i)
				this.dataList[i].poiu=0
				this.$forceUpdate()
				}
			},
			updataTabType(type) {
				this.tabType = type;
				this.mescroll.resetUpScroll();
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			upCallback(page) {
				let params = {
					token: uni.getStorageSync("token"),
					p: page.num,
					type: this.tabType, //type 1 2
				}
				console.log(params);
				this.$request("api/Index/alcohol_list", params)
					.then(({
						code,
						msg,
						data,
						time
					}) => {
						console.log(code, msg, data);
						if (code == 1) {
							if (page.num == 1) {
								this.dataList = data.list;
								this.dataList.forEach(item=>{
									item.poiu=0
									console.log(item)
								})
							} else {
								this.dataList = this.dataList.concat(data.list);
							}
							this.mescroll.endSuccess(data.list.length);
						} else {
							this.mescroll.endErr()
						}
					}).catch((e) => {
						this.dataList = [];
						this.mescroll.endErr()
						console.log(e);
					});
			},
			cancel() {
				this.$refs.popup.close();
			},
			submit() {
				this.$refs.popup.close();

				this.useStoreWine();
			},
			useNow(invite_code) {				
				let paramst = {
					token: uni.getStorageSync("token"),
					invite_code: invite_code,
				}
				this.$request("api/user/ceshi", paramst)
					.then(({
						code,
						msg,
						data,
						time
					}) => {
						uni.showToast({
							title: code
						})
						if (code == 1) {
							uni.showToast({
								title: data
							})
							this.$refs.popup.open();
						} else {
							uni.showToast({
								title: msg,
								icon: 'none',
								duration: 2000
							})
						}
					}).catch((e) => {
						uni.showToast({
							title: '绑定桌位码失败',
							icon: 'none',
							duration: 2000
						})
						console.log(e);
					});
					
			},
			scan(item) {
				this.wineItem = item;

				let that = this;

				if (this.userAgent == 'wechat') {
					wxUtil.use().then(() => {
						console.log(wxUtil.jweixin);
						wxUtil.jweixin.scanQRCode({
							needResult: 1,
							scanType: ["qrCode"],
							success: function(res) {
								var result = res.resultStr;
								console.log(result);
								//解析数据问题
								if (result.indexOf('=') != -1) {
									let _params = result.split('=');
									if (_params.length == 2) {
										let _paramList = _params[1].split('_');
										if (_paramList.length == 3) {
											let invite_code = _paramList[2];
											// uni.showToast({ title: invite_code, icon: 'none',duration:2000 });
											//缓存桌位号
											uni.setStorageSync("invite_code", invite_code);											
											// that.table_number = invite_code;
											that.useNow(invite_code);
									

										} else {
											uni.showToast({
												title: '请扫描正确的二维码！',
												icon: 'none',
												duration: 2000
											})
										}
									} else {
										uni.showToast({
											title: '请扫描正确的二维码！',
											icon: 'none',
											duration: 2000
										})
									}
								} else {
									uni.showToast({
										title: '请扫描正确的二维码！',
										icon: 'none',
										duration: 2000
									})
								}
							}
						})
					});
				} else {
					ap.scan({
						type: 'qr'
					}, function(res) {
						if (res.error == 10) {
							// 错误码为10：用户取消操作
							// ...
						} else if (res.error == 11) {
							// 错误码为11：扫码失败
							alert('网络开小差了...');
							// ....
						} else {
							console.log(res.code);

							var result = res.code;
							//解析数据问题
							if (result.indexOf('=') != -1) {
								let _params = result.split('=');
								if (_params.length == 2) {
									let _paramList = _params[1].split('_');
									if (_paramList.length == 3) {
										let invite_code = _paramList[2];
										// uni.showToast({ title: invite_code, icon: 'none',duration:2000 });
										//缓存桌位号
										uni.setStorageSync("invite_code", invite_code);
										// that.useStoreWine(invite_code);
										// that.table_number = invite_code;
										that.useNow(invite_code);
									} else {
										uni.showToast({
											title: '请扫描正确的二维码！',
											icon: 'none',
											duration: 2000
										})
									}
								} else {
									uni.showToast({
										title: '请扫描正确的二维码！',
										icon: 'none',
										duration: 2000
									})
								}
							} else {
								uni.showToast({
									title: '请扫描正确的二维码！',
									icon: 'none',
									duration: 2000
								})
							}
						}
					});
				}


			},

			useStoreWine() {
				//api/Index/use_alcohol 使用存酒券
				uni.showToast({
					title: "正在使用...",
					icon: 'loading',
					mask: true,
					duration: 10000
				});
				let params = {
					token: uni.getStorageSync("token"),
					table_number: this.table_number,
					id: this.wineItem.id,
				}
				console.log(params);
				this.$request("api/Index/use_alcohol", params)
					.then(({
						code,
						msg,
						data,
						time
					}) => {
						console.log(code, msg, data);
						if (code == 1) {
							uni.hideToast();
							uni.showToast({
								title: msg,
								icon: 'success',
								duration: 3000
							});

							this.mescroll.resetUpScroll();
						} else {
							uni.hideToast();
							uni.showToast({
								title: msg,
								icon: 'none'
							});
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped>
	.tjj_yi {
		width: 40rpx;
	}

	.box {
		background-color: #010B24;
	}

	.top-view {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
	}

	.top-item {
		flex: 1;
		height: 100rpx;
	}

	.top-item-active {
		flex: 1;
		height: 100rpx;
	}

	.top-item-title {
		font-size: 30rpx;
		color: #FFFFFFCC;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.top-item-title-active {
		font-size: 30rpx;
		color: #FFF;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.top-item-line {
		width: 75rpx;
		height: 5rpx;
		background-color: #010B24;
		border-radius: 3rpx;
	}

	.top-item-line-active {
		width: 75rpx;
		height: 5rpx;
		background-color: #FFF;
		border-radius: 3rpx;
	}

	.item-view {
		width: 690rpx;
		/* height: 344rpx; */
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
		background-image: linear-gradient(to bottom, #A972F7, #8B47E9, #A972F7);
		padding: 0 30rpx 20rpx;
		position: relative;
	}

	.item-view-notime {
		width: 690rpx;
		height: 344rpx;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
		background-image: linear-gradient(to bottom, #222F4D, #3A4669, #222F4D);
		padding: 0 30rpx;
		position: relative;
	}

	.item-top-view {
		width: 100%;
		height: 87rpx;
		border-bottom: 1rpx solid #E3D0FF66;
	}

	.item-top-view-title {
		font-size: 28rpx;
		color: #FFF;
	}

	.item-top-btn {
		width: 138rpx;
		height: 51rpx;
		background-color: #FFF;
		border-radius: 26rpx;
		font-size: 22rpx;
		color: #8C47E9;
	}

	.item-round {
		width: 139rpx;
		height: 139rpx;
		border-radius: 70rpx;
		background-color: #9C61EF;
		font-size: 28rpx;
		color: #FFF;
	}

	.item-round-notime {
		width: 139rpx;
		height: 139rpx;
		border-radius: 70rpx;
		background-color: #222E4D;
		font-size: 28rpx;
		color: #FFF;
	}

	.item-time {
		font-size: 26rpx;
		color: #E3D0FF;
		line-height: 45rpx;
	}

	.item-time-notime {
		font-size: 26rpx;
		color: #BFCBE8;
		line-height: 45rpx;
	}

	.btm-view {
		width: 100%;
padding-top: 6rpx;
		font-size: 28rpx;
		color: #FFF;
		/* border-top: 1rpx solid #E3D0FF66; */
		overflow: auto;
		/* padding-top: 72rpx; */
		line-height: 40rpx;
		font-family: PingFang SC;
		font-weight: 400;
		min-height: 80rpx;
	}
.btm-vi{
	    width: 100%;
	    max-height: 144rpx;
	    font-size: 28rpx;
	    color: #FFF;
	    border-top: 1rpx solid #E3D0FF66;
	    overflow: auto;
	    /* padding-top: 72rpx; */
	    /* line-height: 40rpx; */
	    font-family: PingFang SC;
	    font-weight: 400;
	    /* min-height: 80rpx; */
	    /* text-align: center; */
	    display: flex;
	    justify-content: center;
	    padding-top: 20rpx;
}
	.line-center {
		width: 1rpx;
		height: 136rpx;
		background-color: #E3D0FF66;
		margin: 0 22rpx;
	}

	.pop-con-view {
		width: 600rpx;
		min-height: 100rpx;
		background-color: #FFF;
		border-radius: 18rpx;
		padding: 18rpx 30rpx;
	}

	.title-view {
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #F3F3F3;
	}

	.pcon-view {
		width: 100%;
		/* height: 70rpx; */
		border-bottom: 1rpx solid #F3F3F3;
		margin-top: 20rpx;
		/* margin-bottom: 20rpx; */
		padding-bottom: 20rpx;
	}

	.pcon-title {
		font-size: 28rpx;
		color: #212121;
	}

	.pcon-hint {
		font-size: 28rpx;
		color: #666;
		width: 80%;
		height: 160rpx;
		overflow: auto;
	}

	.pcon-hintss {
		font-size: 28rpx;
		color: #666;
		width: 80%;
		/* height: 160rpx; */
		/* overflow: auto; */
	}

	.btn-view {
		margin-top: 30rpx;
	}

	.btn-cancel {
		padding: 14rpx 75rpx;
		background-color: #FFF;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #121212;
	}

	.btn-cancel:active {
		background-color: #FFFFFFEE;
	}

	.btn-submit {
		padding: 14rpx 80rpx;
		margin-left: 30rpx;
		background-color: #DA5CE9;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #FFF;
	}

	.btn-submit:active {
		background-color: #DA5CE9EE;
	}

	.yishiyong-icon {
		width: 217rpx;
		height: 180rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 2;
	}

	.yiguoqi-icon {
		width: 217rpx;
		height: 180rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 2;
	}

	.ppds {
		margin-top: 18rpx;
		margin-bottom: 18rpx;
	}

	.pcon-viewps {
		width: 100%;
		/* border-bottom: 1rpx solid #F3F3F3; */
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}
</style>
